<template>
    <div class="group-lst">
        <ZwSearchForm row-num="4" :option="searchOption" @search="search" @reset="reset" />
        <div class="container-table">
            <ZwTable
                ref="tableRef"
                class="table-box"
                tab-h="initial"
                :fetch-api="fetchApi()"
                :close-loading="true"
                :option="tableOption"
                :fetch-params="state.searchParams">
                <template #headerOperate>
                    <el-button class="export-btn" plain @click="exportAll"> 导出全部 </el-button>
                </template>
            </ZwTable>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed } from 'vue';
import ZwSearchForm from '@/components/zw/search-form1.0/SearchForm';
import ZwTable from '@/components/zw/table1.0/Table';
import { staticUser, userExport, getGroupList, getWorkList } from '@/api/smartMarketing/drainage/shuntCode';
import { deepCopy } from '@/utils/helper';
import { useRoute } from 'vue-router';
import { QuestionFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { ShowTaskMessage } from '@/hooks/TaskMessageHooks';
import { parabolaAnimation } from '@/utils/parabola';
import { getTextWidth } from '@/utils/utils';

const route = useRoute();
const tableRef: any = ref<HTMLElement | null>(null);
const defaultParams = {
    id: route.query.id, //活动ID
    nickname: '', //用户昵称
    work_user: [], //引流员工id
    group_id: '' //引流分组id
};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const searchOption = computed(() => {
    return [
        {
            label: '用户昵称',
            name: 'nickname',
            value: '',
            type: 'input',
            placeholder: '请输入用户昵称'
        },
        {
            label: '引流员工',
            name: 'work_user',
            value: [],
            type: 'select',
            placeholder: '请输入引流员工昵称',
            multiple: true,
            filterable: true,
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getWorkList().then((res: any) => {
                        const userid: any = [];
                        res.forEach((item: any) => {
                            userid.push(item);
                            resolve(userid);
                        });
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '引流分组',
            name: 'group_id',
            value: '',
            type: 'select',
            placeholder: '请输入引流分组名称',
            filterable: true,
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getGroupList({ id: route.query.id }).then((res: any) => {
                        const groupid: any = [];
                        res.forEach((item: any) => {
                            groupid.push(item);
                            resolve(groupid);
                        });
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        }
    ];
});
const search = (v: any) => {
    if (v.nickname) {
        v.nickname = v.nickname.trim();
    }
    state.searchParams = { ...deepCopy(defaultParams), ...v };
};
const reset = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams) };
};
// 表格
const tableOption = [
    {
        prop: 'serial_num',
        label: '序号',
        width: 80
    },
    {
        prop: 'nickname',
        label: '用户信息',
        width: 300,
        render({ row }: any) {
            const defaultContent = () => <div style="width: 300px;">{row.nickname}</div>;
            return (
                <div class="user-info">
                    <el-image class="user-image" src={row.headimgurl} fit="cover"></el-image>
                    {getTextWidth(row.nickname, '14px sans-serif') > 250 ? (
                        <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                            <span class="user-name">{row.nickname}</span>
                        </el-tooltip>
                    ) : (
                        <span>{row.nickname || '--'}</span>
                    )}
                </div>
            );
        }
    },
    {
        prop: 'is_friend',
        label: '是否企微好友',
        minWidth: 130,
        renderHeader: () => {
            return (
                <div class="box-item-div">
                    <span>是否企微好友</span>
                    <el-tooltip
                        placement="top"
                        effect="dark"
                        show-after="800"
                        content="该用户是否至少有添加一个该企业员工的企业微信">
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        },
        render({ row, column, index }: any) {
            return <div>{row.is_friend == 1 ? '是' : '否'}</div>;
        }
    },

    {
        prop: 'is_new',
        label: '是否新客户',
        minWidth: 120,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 250px;">该用户是否通过该活动第一次添加该企业的员工的企业微信</div>
            );
            return (
                <div class="box-item-div">
                    <span>是否新客户</span>
                    <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        },
        render({ row, column, index }: any) {
            return <div>{row.is_new == 1 ? '是' : '否'}</div>;
        }
    },
    {
        prop: 'is_lost',
        label: '是否流失',
        minWidth: 100,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 250px;">该用户是否通过该活动的渠道活码添加了引流员工又删除该引流员工的企业微信</div>
            );
            return (
                <div class="box-item-div">
                    <span>是否流失</span>
                    <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        },
        render({ row, column, index }: any) {
            return <div class="is-lost">{row.is_lost == 1 ? '是' : '否'}</div>;
        }
    },
    {
        prop: 'follow_time',
        label: '添加时间',
        width: 170,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 250px;">该用户通过该活动渠道活码添加了引流员工的添加时间</div>
            );
            return (
                <div class="box-item-div">
                    <span>添加时间</span>
                    <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        },
        render({ row, column, index }: any) {
            return <div>{row.follow_time ? row.follow_time : '--'}</div>;
        }
    },
    {
        prop: 'lost_time',
        label: '流失时间',
        width: 170,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 250px;">该用户通过该活动渠道活码添加了引流员工又删除时的删除时间</div>
            );
            return (
                <div class="box-item-div">
                    <span>流失时间</span>
                    <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        },
        render({ row, column, index }: any) {
            return <div>{row.lost_time ? row.lost_time : '--'}</div>;
        }
    },
    {
        prop: 'work_user_name',
        label: '引流员工',
        width: 300,
        render({ row }: any) {
            const defaultContent = () => (
                <div style="width: 300px;">
                    {row.work_user_name}
                    <span v-show={row.is_remove == 1}>（已移除）</span>
                </div>
            );
            return (
                <div class="user-info">
                    <el-image class="user-image" src={row.work_user_avatar} fit="cover"></el-image>
                    {getTextWidth(
                        row.is_remove == 1 ? row.work_user_name + '（已移除）' : row.work_user_name,
                        '14px sans-serif'
                    ) > 250 ? (
                        <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                            <span class="user-name">
                                {row.work_user_name}
                                <span v-show={row.is_remove == 1}>（已移除）</span>
                            </span>
                        </el-tooltip>
                    ) : (
                        <span>
                            {row.work_user_name || '--'}
                            <span v-show={row.is_remove == 1}>（已移除）</span>
                        </span>
                    )}
                </div>
            );
        }
    },
    {
        prop: 'group_name',
        label: '引流分组',
        showOverflowTooltip: true,
        minWidth: 250,
        render({ row }: any) {
            return (
                <span>
                    {row.group_name || '--'}
                    <span v-show={row.is_delete == 1}>（已删除）</span>
                </span>
            );
        }
    }
];
const fetchApi = () => {
    return staticUser;
};
//导出全部
const exportAll = e => {
    userExport(state.searchParams)
        .then((res: any) => {
            parabolaAnimation(e);
            ShowTaskMessage('导出全部异步任务创建成功');
        })
        .catch((err: any) => {
            ElMessage.error(err);
        });
};
</script>
<style lang="scss" scoped>
.group-lst {
    padding: 24px;
    height: calc(100vh - 406px);
    display: flex;
    flex-direction: column;

    .container-table {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #fff;
        flex: 1;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }

        .export-btn {
            margin-top: 8px;
        }
    }

    :deep(.user-info) {
        display: flex;
        align-items: center;

        .user-image {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .user-name {
            max-width: 250px;
            font-size: 14px;
            font-weight: 300;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
    }

    :deep(.zw-search-form1) {
        padding: 0;
        padding-bottom: 16px;
    }

    :deep(.is-lost) {
        height: 46px;
        display: flex;
        align-items: center;
    }

    :deep(.zw-table__com_table.el-table .el-table__body tbody tr td) {
        padding: 5px 0;
    }
}

:deep(.box-item-div) {
    display: flex;
    line-height: 1;
}

:deep(.box-icon) {
    margin-left: 4px;
    color: #969696;
    background: #fff;
    border-radius: 50%;
}
</style>
